<!-- 指派负责人 -->
<template>
  <view class="container">
    <FilterNavbar>
      <template #center>
        <view class="navbar-title"> 选择负责人 </view>
      </template>
    </FilterNavbar>
    <view class="viewports">
      <ve-form ref="ve_form" :model="form" :rules="rules">
        <ve-card type="none" fold v-model:initFold="foldStatus.fold1">
          <ve-form-item label="指派负责人" :borderBottom="false" prop="staffId" required>
            <remote-select
              type="reassignment_staff_list_multiple"
              :params="{
                siteIdList: [record.siteId],
              }"
              v-model="form.staffId"
              v-model:label="form.realname"
            />
          </ve-form-item>
        </ve-card>
      </ve-form>
    </view>
    <ve-bottom-box>
      <ve-button type="primary" :loading="okLoading" @click="formSubmit" style="width: 100%">确认</ve-button>
    </ve-bottom-box>
  </view>
</template>

<script setup lang="ts">
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, nextTick } from 'vue'
  import FilterNavbar from '@/components/FilterNavbar'
  import useFormFold from '@/hooks/useFormFold'
  import { assignDutyPeopleAPI } from '@/api/order/workOrder'
  const initFold1 = ref(true)
  const record = ref(null)
  const form = ref({
    id: '',
  })
  const { foldStatus, foldValidate } = useFormFold([
    {
      key: 'fold1',
      props: ['staffId'],
    },
  ])
  const rules = ref({
    staffId: {
      required: true,
      message: '请选择负责人',
    },
  })
  const toast = (e) => {
    uni.showToast({
      title: e,
      icon: 'none',
    })
  }
  onLoad((options) => {
    console.log(JSON.parse(options.record))
    record.value = JSON.parse(options.record)
    form.value.id = record.value.id
  })
  const ve_form = ref(null)
  const okLoading = ref(false)
  const formSubmit = () => {
    ve_form.value.validate((valid, errors) => {
      console.log(valid)
      if (valid) {
        var res
        var params = {
          ...form.value,
        }
        okLoading.value = true
        assignDutyPeopleAPI(params)
          .then((res) => {
            if (res.code == 200) {
              toast(res.message)
              uni.$emit('refreshData')
              uni.navigateBack()
            } else {
              toast(res.message)
              return false
            }
          })
          .catch(() => {
            okLoading.value = false
          })
      } else {
        foldValidate(errors)
        console.log('验证失败', errors)
      }
    })
  }
  defineExpose({})
</script>

<style lang="scss" scoped>
  .container {
    background: #f7f8fa;
  }

  .viewports {
    display: flex;
    flex-direction: column;
    padding: 24rpx;
  }
</style>
